<template>
  <div>
    <div class="editTop">
      <el-button
        icon="el-icon-back"
        circle
        @click="closeEditModal"
        type="primary"
      ></el-button>
      <span>{{ isEdit ? "编辑" : "新增" }}专家</span>
    </div>
    <el-form
      label-position="right"
      label-width="120px"
      :model="form"
      :rules="rules"
      ref="ruleForm"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" style="max-width: 480px"></el-input>
      </el-form-item>
      <el-form-item label="职务" prop="job">
        <el-input v-model="form.job" style="max-width: 480px"></el-input>
      </el-form-item>
      <el-form-item label="介绍" prop="desc">
        <el-input
          v-model="form.desc"
          type="textarea"
          maxlength="120"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="权重" prop="weight">
        <el-input
          v-model.number="form.weight"
          style="width: 120px"
          type="number"
        ></el-input>
      </el-form-item>

      <el-form-item label="大图" prop="bigImage" @click="uploadImageName = 'bigImage'">
        <!-- <el-upload
          style="position: relative;top: 10px;height: 120px;"
          :show-file-list="false"
          class="avatar-uploader"
          :action="uploadUrl()"
          accept="image/jpeg,image/jpg,image/png，image/webp"
          list-type="picture-card"
          :data="uploadData"
          :on-success="handleAvatarSuccess('bigImage')"
        >
          <img v-if="form.bigImage" :src="form.bigImage" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload> -->
        <uploadCropper :handleAvatarSuccess="handleAvatarSuccess('bigImage')" :url="form.bigImage"/>
        <el-alert
          style="margin-top: 50px"
          show-icon
          title="图片比最佳分辨率为64px：64px的整数倍。"
          type="info"
        >
        </el-alert>
      </el-form-item>
      <el-form-item label="小图" prop="smallImage">
        <!-- <el-upload
          style="position: relative;top: 10px;height: 120px;"
          :show-file-list="false"
          class="avatar-uploader"
          :action="uploadUrl()"
          accept="image/jpeg,image/jpg,image/png，image/webp"
          list-type="picture-card"
          :data="uploadData"
          :on-success="handleAvatarSuccess('smallImage')"
        >
          <img v-if="form.smallImage" :src="form.smallImage" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload> -->
        <uploadCropper :handleAvatarSuccess="handleAvatarSuccess('smallImage')" :url="form.smallImage"/>
        <el-alert
          style="margin-top: 50px"
          show-icon
          title="图片比最佳分辨率为64px：64px的整数倍。"
          type="info"
        >
        </el-alert>
      </el-form-item>
      <el-form-item label="上线状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio
            v-for="(value, key) in adStatus"
            :label="Number(key)"
            :key="key"
            >{{ value }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="footer">
      <el-button @click="closeEditModal">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import { getUploadToken, uploadUrl } from "@/util/upload";
import { adStatus } from "@/config/ad";

export default {
  props: ["originForm", "isEdit", "closeEditModal"],
  data() {
    return {
      adStatus,
      // 上传相关
      uploadData: {  },
      uploadImageName: '',
      uploadUrl,
      form: {
        status: 1
      },
      rules: {
        name: [{ required: true, message: "请输入专家姓名", trigger: "blur" }],
        job: [
          { required: true, message: "请输入专家职务", trigger: "blur" },
        ],
        desc: [
          { required: true, message: "请输入专家介绍", trigger: "blur" },
        ],
        bigImage: [
          { required: true, message: "请输入专家介绍", trigger: "blur" },
        ],
        smallImage: [
          { required: true, message: "请输入专家介绍", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择发布状态", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleSubmit() {
      const { originForm, form, isEdit } = this;
      const ajaxType = isEdit ? "put" : "post";
      const url = isEdit
        ? `/api/qw/professor/${originForm.uuid}.json?_method=put`
        : "/api/qw/professor.json";
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$axios[ajaxType](url, this.form).then((response) => {
            this.$message.success("提交成功");
            this.closeEditModal();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleAvatarSuccess(name, res, file) {
      const fileName = name
      return (res, file) => {
        const fileObj = this.$utils.judgeLogin(res);;
        this.form[fileName] = fileObj.url;
        this.form = JSON.parse(JSON.stringify(this.form))
      }
    },
    beforeAvatarUpload(file) {
      return getUploadToken(file.name).then((res) => {
        this.uploadData.token = res.ticket;
      });
    },
  },
  created() {
    this.form = this.originForm;
  },
  mounted() {
  },
  beforeDestroy() {
  },
};
</script>
<style lang="scss" scoped>
.editTop {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  margin-left: 20px;
  button {
    margin-right: 10px;
  }
}
.footer {
  display: flex;
  justify-content: center;
}
.divideTop {
  margin-top: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar {
  width: 146px;
  height: 146px;
  display: block;
  overflow: hidden;
}
</style>
